<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/index.css">
    <script src="./vue.js"></script>
    <style>
        #app{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #app .header,
        #app .footer{
            width: 7.5rem;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: grey;
            text-align: center;
        }

        #app .footer{
            display: flex;
        }
        #app .footer a{
            flex: 1;
            text-align: center;
        }

        #app .main{
            flex: 1;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">头部</div>
        <component class="main" :is="showComp"></component>
        <div class="footer">
            <!-- <a @click="showComp='HomeView'">主页</a>
            <a @click="showComp='ListView'">列表页</a>
            <a @click="showComp='CarView'">购物车</a>
            <a @click="showComp='MineView'">我的</a> -->
            <a href="#/home">主页</a>
            <a href="#/list">列表页</a>
            <a href="#/car">购物车</a>
            <a href="#/mine">我的</a>
        </div>
    </div>
</body>
<script>

    /*  
        单页面应用: 
            1. 以移动端为例, 页面布局常见为上中下三栏布局, 头尾经常可以复用, 只有中间部分进行切换
            2. 在学习Vue组件化和动态组件以后, 不用将中间部分,单独写一个页面, 而是拆分成个个组件, 使用组件动态切换即可
            3. 切换为单页面应用之后, 通篇只有一个页面, 其他的都是根组件的子(代)组件,  => 问题: 此时页面每次刷新,组件重新挂载, 都会回到初始页

                前端路由: 单页面应用中,视图(页面) 切换时, 记录切换的位置

                hash路由:  利用hash值模拟路由(路径), 渲染对应的视图 (a. hash值不会随页面刷新而消失  b. hash值也不会传递给后端)

                hash值    组件
                #/home    HomeView
                #/list    ListView
                #/car     CarView
                #/mine    MineView



                history路由:   
    
    */

    let HomeView = {
        name:"HomeView",
        template:`<div class="home">这是主页</div>`,
    }

    let ListView = {
        name:"ListView",
        template:`<div class="list">这是列表页</div>`,
    }
    let CarView = {
        name:"CarView",
        template:`<div class="car">这是购物车页</div>`,
    }
    let MineView = {
        name:"MineView",
        template:`<div class="mine">这是个人页</div>`,
    }

    // 将 路径和视图 相互关联的一个映射 (数组)
    let routes = [{
        path:"/home", // 路径
        component:HomeView,  //视图(组件) 配置对象 (组件配置和组件名)
    },{
        path:"/list", // 路径
        component:ListView,  //视图(组件) 配置对象 (组件配置和组件名)
    },{
        path:"/car", // 路径
        component:CarView,  //视图(组件) 配置对象 (组件配置和组件名)
    },{
        path:"/mine", // 路径
        component:MineView,  //视图(组件) 配置对象 (组件配置和组件名)
    }] 


    var obj = {a:1,b:2,c:3,d:4};

    // 一一对应  
    // var {a,b,c,d} = obj;  // 对应键名解构

    var {a,...data} = obj;  // Rest参数 => 将剩余参数整合到对象中
    // a => a   ...data =>  b:2,c:3,d:4


    
    /* 将routes中的组件 注册到根组件 */
    function parseRoute(routes){
        let obj = {};
        routes.forEach(route=>{
            let component = route.component;
            let {name, ...conponentOption} = component;
            obj[name] = conponentOption;
        })
        return obj;
    }

    console.log(parseRoute(routes));  // 解析得到组件名和它对应的配置项

    var vm = new Vue({
        el:"#app",
        data:{
            showComp:"HomeView"
        },
        components: {
            // HomeView:HomeView,
            // ListView:ListView,
            // CarView:ListView,
            // MineView:CarView
            ...parseRoute(routes),  // 组件注册
        }
    })


    
</script>
</html>